<template>
  <div>
    <!-- 搜索 -->
    <div class="flex flex-row gap-6 items-center">
      <div class="sm:w-96 mb-8">
        <label class="block text-cape-cod font-bold"
          >Search
          <!-- -->Sobhna's</label
        ><input
          placeholder="Find products at Sobhna's"
          @keyup="OnSearchKeyup"
          v-model="inputRef"
          class="disabled:opacity-50 appearance-none block w-full mt-2 px-3 py-2 border border-cadet-blue font-medium rounded-md shadow-sm placeholder-steel focus:outline-none focus:border-cadet-blue focus:text-cape-cod"
        />
      </div>
      <div v-if="inputRef" class="hidden sm:block text-gray-400">
        {{ listCountRef }} results for '{{ inputRef }}'
      </div>
    </div>

    <div>
      <!-- 列表,没有数据时展示 -->
      <div
        class="flex flex-col p-20 items-center justify-center gap-3"
        v-if="!listCountRef"
      >
        <p class="text-xl">No Sobhna's products match 'sdf'</p>
        <p class="text-gray-400">Try different keywords</p>
      </div>

      <!-- 列表,有数据时展示 -->
      <div
        v-else
        class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-12"
      >
        <a
          class="flex flex-col"
          href="/global/products/sobhna-s-curry-paste-hot/26204"
          v-for="item in productList"
          :key="item.id"
        >
          <div
            class="card flex-auto bg-white select-none border border-periwinkle-gray rounded-2xl text-cape-cod flex flex-col items-center justify-between relative cursor-pointer"
          >
            <div
              class="flex-1 space-y-3 p-1 w-full flex flex-col justify-center items-center"
            >
              <!-- 图片 -->
              <div class="flex flex-grow">
                <div
                  class="sm:p-3 flex items-center justify-center w-full transition-opacity opacity-100"
                >
                  <span
                    style="
                      box-sizing: border-box;
                      display: inline-block;
                      overflow: hidden;
                      width: initial;
                      height: initial;
                      background: none;
                      opacity: 1;
                      border: 0;
                      margin: 0;
                      padding: 0;
                      position: relative;
                      max-width: 100%;
                    "
                    ><span
                      style="
                        box-sizing: border-box;
                        display: block;
                        width: initial;
                        height: initial;
                        background: none;
                        opacity: 1;
                        border: 0;
                        margin: 0;
                        padding: 0;
                        max-width: 100%;
                      "
                      ><img
                        style="
                          display: block;
                          max-width: 100%;
                          width: initial;
                          height: initial;
                          background: none;
                          opacity: 1;
                          border: 0;
                          margin: 0;
                          padding: 0;
                        "
                        alt=""
                        aria-hidden="true"
                        src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27200%27%20height=%27170%27/%3e" /></span
                    ><img
                      alt="Sobhna's curry paste hot"
                      :src="item.imageUrl"
                      decoding="async"
                      data-nimg="intrinsic"
                      style="
                        position: absolute;
                        top: 0;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        box-sizing: border-box;
                        padding: 0;
                        border: none;
                        margin: auto;
                        display: block;
                        width: 0;
                        height: 0;
                        min-width: 100%;
                        max-width: 100%;
                        min-height: 100%;
                        max-height: 100%;
                        object-fit: contain;
                      "
                      :srcset="item.imageUrl"
                  /></span>
                </div>
              </div>

              <!-- 内容 -->
              <div class="p-2 sm:px-3 sm:pb-3 w-full sm:h-28 sm:max-h-28">
                <h3
                  class="font-bold text-base text-cape-cod sm:h-12 overflow-hidden w-full"
                >
                  {{ item.name }}
                </h3>
                <div class="flex flex-row justify-between items-center">
                  <div>
                    <small class="text-tiny text-cadet-blue font-bold"
                      >From</small
                    >
                    <div class="font-bold text-lg text-cape-cod">
                      ${{ item.priceAmount }}
                    </div>
                  </div>
                  <ul class="flex-row flex mr-2 hidden md:flex">
                    <li
                      class="w-9 h-9 max-w-9 max-h-9 min-w-9 min-h-9 border-3 border-white -mr-2 rounded-full shadow-lg text-xs font-black flex justify-center items-center relative bg-gray-100"
                    >
                      <span
                        style="
                          box-sizing: border-box;
                          display: inline-block;
                          overflow: hidden;
                          width: initial;
                          height: initial;
                          background: none;
                          opacity: 1;
                          border: 0px;
                          margin: 0px;
                          padding: 0px;
                          position: relative;
                          max-width: 100%;
                        "
                        ><span
                          style="
                            box-sizing: border-box;
                            display: block;
                            width: initial;
                            height: initial;
                            background: none;
                            opacity: 1;
                            border: 0px;
                            margin: 0px;
                            padding: 0px;
                            max-width: 100%;
                          "
                          ><img
                            alt=""
                            aria-hidden="true"
                            src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"
                            style="
                              display: block;
                              max-width: 100%;
                              width: initial;
                              height: initial;
                              background: none;
                              opacity: 1;
                              border: 0px;
                              margin: 0px;
                              padding: 0px;
                            " /></span
                        ><img
                          alt="Countdown"
                          srcset="
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=48&amp;q=75 1x,
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=96&amp;q=75 2x
                          "
                          src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=96&amp;q=75"
                          decoding="async"
                          data-nimg="intrinsic"
                          class="rounded-full"
                          style="
                            position: absolute;
                            inset: 0px;
                            box-sizing: border-box;
                            padding: 0px;
                            border: none;
                            margin: auto;
                            display: block;
                            width: 0px;
                            height: 0px;
                            min-width: 100%;
                            max-width: 100%;
                            min-height: 100%;
                            max-height: 100%;
                          "
                      /></span>
                    </li>
                    <li
                      class="w-9 h-9 max-w-9 max-h-9 min-w-9 min-h-9 border-3 border-white -mr-2 rounded-full shadow-lg text-xs font-black flex justify-center items-center relative bg-gray-100"
                    >
                      <span
                        style="
                          box-sizing: border-box;
                          display: inline-block;
                          overflow: hidden;
                          width: initial;
                          height: initial;
                          background: none;
                          opacity: 1;
                          border: 0px;
                          margin: 0px;
                          padding: 0px;
                          position: relative;
                          max-width: 100%;
                        "
                        ><span
                          style="
                            box-sizing: border-box;
                            display: block;
                            width: initial;
                            height: initial;
                            background: none;
                            opacity: 1;
                            border: 0px;
                            margin: 0px;
                            padding: 0px;
                            max-width: 100%;
                          "
                          ><img
                            alt=""
                            aria-hidden="true"
                            src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"
                            style="
                              display: block;
                              max-width: 100%;
                              width: initial;
                              height: initial;
                              background: none;
                              opacity: 1;
                              border: 0px;
                              margin: 0px;
                              padding: 0px;
                            " /></span
                        ><img
                          alt="Farro Foods"
                          srcset="
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2F18209067_1400931856634036_6605689701195965494_o_63899fc.jpg&amp;w=48&amp;q=75 1x,
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2F18209067_1400931856634036_6605689701195965494_o_63899fc.jpg&amp;w=96&amp;q=75 2x
                          "
                          src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2F18209067_1400931856634036_6605689701195965494_o_63899fc.jpg&amp;w=96&amp;q=75"
                          decoding="async"
                          data-nimg="intrinsic"
                          class="rounded-full"
                          style="
                            position: absolute;
                            inset: 0px;
                            box-sizing: border-box;
                            padding: 0px;
                            border: none;
                            margin: auto;
                            display: block;
                            width: 0px;
                            height: 0px;
                            min-width: 100%;
                            max-width: 100%;
                            min-height: 100%;
                            max-height: 100%;
                          "
                      /></span>
                    </li>
                  </ul>
                  <ul class="flex-row flex mr-2 flex md:hidden">
                    <li
                      class="w-9 h-9 max-w-9 max-h-9 min-w-9 min-h-9 border-3 border-white -mr-2 rounded-full shadow-lg text-xs font-black flex justify-center items-center relative bg-gray-100"
                    >
                      <span
                        style="
                          box-sizing: border-box;
                          display: inline-block;
                          overflow: hidden;
                          width: initial;
                          height: initial;
                          background: none;
                          opacity: 1;
                          border: 0px;
                          margin: 0px;
                          padding: 0px;
                          position: relative;
                          max-width: 100%;
                        "
                        ><span
                          style="
                            box-sizing: border-box;
                            display: block;
                            width: initial;
                            height: initial;
                            background: none;
                            opacity: 1;
                            border: 0px;
                            margin: 0px;
                            padding: 0px;
                            max-width: 100%;
                          "
                          ><img
                            alt=""
                            aria-hidden="true"
                            src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"
                            style="
                              display: block;
                              max-width: 100%;
                              width: initial;
                              height: initial;
                              background: none;
                              opacity: 1;
                              border: 0px;
                              margin: 0px;
                              padding: 0px;
                            " /></span
                        ><img
                          alt="Countdown"
                          srcset="
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=48&amp;q=75 1x,
                            https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=96&amp;q=75 2x
                          "
                          src="https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fretailers%2FCountdown_62560e3.png&amp;w=96&amp;q=75"
                          decoding="async"
                          data-nimg="intrinsic"
                          class="rounded-full"
                          style="
                            position: absolute;
                            inset: 0px;
                            box-sizing: border-box;
                            padding: 0px;
                            border: none;
                            margin: auto;
                            display: block;
                            width: 0px;
                            height: 0px;
                            min-width: 100%;
                            max-width: 100%;
                            min-height: 100%;
                            max-height: 100%;
                          "
                      /></span>
                    </li>
                    <li
                      class="w-9 h-9 max-w-9 max-h-9 min-w-9 min-h-9 border-3 border-white -mr-2 rounded-full shadow-lg text-xs font-black flex justify-center items-center relative bg-yellow"
                    >
                      +1
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div></a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import trim from "lodash/trim";
export default {
  setup() {
    const products = [
      {
        id: 262041,
        category_id: 4,
        brand_id: 5069,
        name: "Sobhna's curry paste hot",
        priceAmount: "11.00",
        imageUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fe7c17dd3be-254354.jpg&w=256&q=75",
        description:
          "\u003cdiv\u003eThis is a super versatile, and super concentrated easy to use Award Winning Curry Paste comes in three heat levels: Kiwi-mild (perfect for children or those with no heat tolerance), medium ( a great balance of heat and flavour) and Indian-hot (for those who love chilli). Packed with flavour, one jar makes up to 1.2kg of meat or vegetables. Winner of the Silver Medal in the NZ Outstanding Food Producers Awards 2021.\u003c/div\u003e",
      },
      {
        id: 262042,
        category_id: 4,
        brand_id: 5069,
        name: "Sobhna's curry paste medium",
        priceAmount: "12.00",
        imageUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2F5a58738604-253645.jpg&w=640&q=75",
        description:
          "\u003cdiv\u003eThis is a super versatile, and super concentrated easy to use Award Winning Curry Paste comes in three heat levels: Kiwi-mild (perfect for children or those with no heat tolerance), medium ( a great balance of heat and flavour) and Indian-hot (for those who love chilli). Packed with flavour, one jar makes up to 1.2kg of meat or vegetables. Winner of the Silver Medal in the NZ Outstanding Food Producers Awards 2021.\u003c/div\u003e",
      },
      {
        id: 262043,
        category_id: 4,
        brand_id: 5069,
        name: "Sobhna's curry paste mild",
        priceAmount: "13.00",
        imageUrl:
          "https://mywellabee.com/_next/image?url=https%3A%2F%2Fmywellabee-prod-listserviceassets-dok3ey33-bucket-cyvcq28e6h73.s3.ap-southeast-2.amazonaws.com%2Fpublic%2Fproducts%2Fac7aec894e-253547.jpg&w=640&q=75",
      },
    ];

    const inputRef = ref("");
    const listCountRef = ref(0);
    const productList = ref(products);

    listCountRef.value = products.length;

    const OnSearchKeyup = (e) => {
      const value = trim(e.target.value);
      if (!value) {
        productList.value = products;
      } else {
        productList.value = products.filter((product) => {
          return product.name.toLowerCase().includes(value.toLowerCase());
        });
      }
      listCountRef.value = productList.value.length;
    };

    return {
      productList,
      inputRef,
      listCountRef,
      OnSearchKeyup,
    };
  },
};
</script>

<style></style>
